<!DOCTYPE html >
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1">
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <script type="text/javascript" src="js/respond.js"></script>
    <link rel="Shortcut Icon" href="app-images/ico_03.png" type="image/x-icon">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <title>闻上管家</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        border: 0;
        outline: none;
        font-family: "Microsoft YaHei" !important;
        font-size: 0.1em;
        min-width: 1000px;
    }
    
    a,
    li {
        outline: none;
    }
    
    ul {
        list-style: none;
    }
    
    .main-content {
        position: relative;
    }
    
    .title {
        position: absolute;
        left: 50%;
        top: 20%;
    }
    
    .title-icon {
        background-image: url(app-images/title-icon.png);
        height: 13px;
        width: 12px;
        display: block;
        position: relative;
        left: -18px;
        top: 25px;
    }
    
    .text {
        position: absolute;
        left: 52%;
        top: 28%;
        width: 555px;
        margin-top: 55px;
    }
    
    .text ul {
        font-size: 16px;
        color: #686868;
    }
    
    .text li {
        line-height: 35px;
        margin-bottom: -15px;
    }
    
    .download-ico {
        position: absolute;
        top: 60%;
        left: 54%;
    }
    
    .download-ico li {
        margin-bottom: 20px;
    }
    
    @media screen and (max-width: 1420px) {
        .text {
            margin-top: 30px;
        }
        .android a img {
            height: 61px;
            width: 300px;
        }
        .ios a img {
            height: 61px;
            width: 300px;
        }
    }
    
    @media screen and (max-width: 1200px) {
        .text {
            margin-top: 8px;
            width: 497px;
        }
        .android a img {
            height: 51px;
            width: 250px;
        }
        .ios a img {
            height: 51px;
            width: 250px;
        }
        .text ul {
            font-size: 14px;
        }
        .text li {
            line-height: 30px;
        }
    }
    
    .pop-case-app {
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        -pie-background: rgba(0, 0, 0, .5);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4B000000, endColorstr=#4B000000);
        background-size: cover;
        z-index: 51;
        overflow: auto;
    }
    
    .pop-case-app div {
        width: 400px;
        height: 150px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -75px;
        font-size: 16px;
        text-align: center;
        border-radius: 8px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=108, Color=#000000)";
        /*IE 8*/
        -moz-box-shadow: 2px 6px 7px 2px rgba(0, 0, 0, 0.1);
        /*FF 3.5+*/
        -webkit-box-shadow: 2px 6px 7px 2px rgba(0, 0, 0, 0.1);
        /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
        box-shadow: 2px 6px 7px 2px rgba(0, 0, 0, 0.1);
        /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
        filter: progid: DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color=#000000);
        /*IE 5.5-7*/
    }
    
    .pop-case-app div p {
        margin-top: 60px;
    }

    span.close-pop-app {
    position: absolute;
    display: block;
    top: 6px;
    right: 15px;
    color: #337ab7;
    cursor: pointer;
}

    </style>
</head>

<body>
    <div class="main-content">
        <img src="app-images/bg.jpg" height="100%" width="100%">
        <div class="text">
            <ul>
                <li><span class="title-icon"></span>闻上云管家是一款NAS产品，也是一款家庭数据和控制中心。</li>
                <li><span class="title-icon"></span>主要为个人和家庭提供了照片管理、影音管理、离线下载、私有云存储与家庭成员多用户分享等服务</li>
                <li><span class="title-icon"></span>APP用户可以下载相应客户端对闻上云管家进行访问，实现数据备份和分享等功能</li>
            </ul>
        </div>
        <div class="download-ico">
            <ul>
                <li class="android">
                    <a href="javascript:void(0);"><img src="app-images/android.png" height="81" width="400"></a>
                </li>
                <li class="ios">
                    <a href="javascript:void(0);"><img src="app-images/ios.png" height="81" width="400"></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="pop-case-app">
        <div>
            <p>近期即将上线，请耐心等待哦！</p>
            <span class="close-pop-app">X</span>
        </div>
    </div>
</body>


<script type="text/javascript">
//鼠标悬停图片切换
$(document).ready(function() {
    $('.download-ico li').click(function() {
        $(".pop-case-app").css('display', 'block');
    });
    $('.close-pop-app').click(function() {
        $(".pop-case-app").css('display', 'none');
    });

    $(".android a img").mouseover(
        function() {
            $(".android a img").attr("src", "app-images/android-hover.png")
        });
    $(".android a img").mouseout(
        function() {
            $(".android a img").attr("src", "app-images/android.png")
        });

    $(".ios a img").mouseover(
        function() {
            $(".ios a img").attr("src", "app-images/ios-hover.png")
        });
    $(".ios a img").mouseout(
        function() {
            $(".ios a img").attr("src", "app-images/ios.png")
        });

});


// 字体随窗口放大缩小
// $(document).ready(function() { 
//     var resizeText = function () {
//         // Standard height, for which the body font size is correct
//         var preferredFontSize = 66; // %
//         var preferredSize = 1024 * 768;

//         var currentSize = $(window).width() * $(window).height();
//         var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
//         var newFontSize = preferredFontSize * scalePercentage;
//         $("body").css("font-size", newFontSize + '%');
//     };

//     $(window).bind('resize', function() {
//         resizeText();
//     }).trigger('resize');

// });
</script>

</html>
